<template>
  <div class="full-container">
      <div class="edit-container">
          <div class="settings">
              <a class="button is-info" @click="isNewCustomerTypeActive = true">新增客户分类</a>
          </div>
          <div class="customer-table ">
            <b-table
                :data="customerTypeList"
                class="customer-table"
                :striped="true"
                :narrowed="true"
                :paginated="true"
                :per-page="15">
                <template slot-scope="props">
                <b-table-column field="id" label="序号" width="50" numeric>
                    {{ props.row.id }}
                </b-table-column>
                <b-table-column field="name" label="分类名">
                    {{ props.row.name }}
                </b-table-column>
                <b-table-column field="type" label="类型" >
                    {{ props.row.type }}
                </b-table-column>
                <b-table-column field="createdAt" label="创建时间">
                    {{props.row.createdAt}}
                </b-table-column>
                <b-table-column field="websiteDescription" label="编辑">
                    <a @click="updateCustomerTypeInfo(props.row.id)">编辑分类信息</a>
                </b-table-column>
                <b-table-column field="websiteDescription" label="删除">
                    <a class="is-danger" @click="deleteCustomerType(props.row.id)">删除分类</a>
                </b-table-column>
                </template>
            </b-table>
          </div>
      </div>
    <!-- 新增用户分类模态框 -->
    <b-modal :active.sync="isNewCustomerTypeActive" :width="640" scroll="keep">
      <div class="card">
          <div class="card-content">
            <b-field label="分类名">
                <b-input v-model="newCustomerType.name"></b-input>
            </b-field>
            <b-field label="分类描述">
                <b-input v-model="newCustomerType.description"></b-input>
            </b-field>
            <div class="card-button">
              <a class="button is-info" @click="createNewCustomerType">新增分类</a>
            </div>
          </div>
      </div>
    </b-modal>
    <!-- 编辑用户分类模态框 -->
    <b-modal :active.sync="isEditCustomerTypeActive" :width="640" scroll="keep">
        <div class="card">
            <div class="card-content">
              <b-field label="分类名">
                  <b-input v-model="editCustomerTypeInfo.name"></b-input>
              </b-field>
              <b-field label="分类描述">
                  <b-input v-model="editCustomerTypeInfo.description"></b-input>
              </b-field>
              <div class="card-button">
                <a class="button is-info" @click="editNewCustomerType()">确定修改</a>
              </div>
            </div>
        </div>
    </b-modal>
    <!-- loading -->
    <b-loading :is-full-page="isFullPage" :active.sync="isLoading" :can-cancel="false"></b-loading>
  </div>
</template>

<script>
import { getUserId } from "@/util/userInfoStorage"
import { getCustomerTypeByUserId, createCustomerType, updateCustomerType, deleteCustomerTypeById } from "@/api/customerType"
import { getCustomerByUserIdAndTypeId } from "@/api/customer"
export default {
  name: "customer-type",
  methods: {
    //删除客户分类
    deleteCustomerType(typeId){
      this.$dialog.confirm({
          title: '删除客户分类',
          message: '确定要 <b>删除</b> 此客户分类? 数据删除后不可回复',
          confirmText: '确定删除',
          cancelText: '取消',
          type: 'is-danger',
          hasIcon: false,
          onConfirm: () => {
            this.isLoading = true;
            deleteCustomerTypeById(this.userId,typeId).then((res)=>{
              this.$toast.open({
                  message: '删除成功',
                  type: 'is-success'
              });
              this.isLoading = false;
              this.getCustomerTypeList();
            }).catch((e) => {
              this.isLoading = false;
              this.$toast.open({
                  message: e.message,
                  type: 'is-danger'
              })
            });
          }
      })
    },
    //提交信息编辑结果
    editNewCustomerType(){
        this.isLoading = true;
        updateCustomerType(this.userId,this.currentEditTypeId,this.editCustomerTypeInfo).then((res) => {
            this.$toast.open({
                message: '分类信息修改成功',
                type: 'is-success',
            })
            this.isLoading = false;
            this.getCustomerTypeList();
            this.isEditCustomerTypeActive = false;
        }).catch(e => {
            this.isLoading = false;
            this.$toast.open({
                message: e.message || '服务器未知错误',
                type: 'is-danger'
            })
        })
    },
    //编辑客户分类信息
    updateCustomerTypeInfo(typeId){
        this.currentEditTypeId = typeId;
        this.isEditCustomerTypeActive = true;
        for(let item of this.customerTypeList){
            if(item.id == typeId){
                this.editCustomerTypeInfo.name = item.name;
                this.editCustomerTypeInfo.description = item.description;
                break;
            }
        }
    },
    //新增客户分类
    createNewCustomerType(){
        if(!this.newCustomerType.name){
          this.$toast.open({
            message: '请填写分类名',
            type: 'is-type'
          })
          return;
        }
        this.isLoading = true;
        createCustomerType(this.userId,this.newCustomerType).then((res) => {
            this.$toast.open({
                message: '创建新分类成功',
                type: 'is-success'
            })
            this.isLoading = false;
            this.getCustomerTypeList();
            this.clearNewCustomerForm();
            this.isNewCustomerTypeActive = false;
        }).catch(e => {
            this.isLoading = false;
            this.$toast.open({
                message: e.message || '服务器未知错误',
                type: 'is-danger',
            })
        })
    },
    //获取客户类型列表
    getCustomerTypeList(){
      this.isLoading = true;
      getCustomerTypeByUserId(this.userId).then((res) => {
        this.customerTypeList = res.data;
        this.isLoading = false;
      }).catch((e) => {
        this.isLoading = false;
        this.$toast.open({
            message: e.message || '服务器未知错误',
            type: 'is-danger'
        })
      })
    },

    clearNewCustomerForm() {
      this.newCustomerType.name = '';
      this.newCustomerType.description = '';
    },
  },
  mounted() {
    let userId = getUserId();
    this.userId = userId;
    //获取全部客户分类
    this.getCustomerTypeList();
  },
  data() {
    return {
        userId: 0,
        customerTypeList: [],
        isNewCustomerTypeActive: false,
        isEditCustomerTypeActive: false,
        currentTypeCustomerList: [],
        newCustomerType: {
            name: '',
            description: '',
        },
        editCustomerTypeInfo: {
            name: '',
            description: ''
        },
        currentEditTypeId: 0,
        isLoading: false,
        isFullPage: true,
    }
  }
}
</script>

<style lang="less" scoped>
.edit-container {
  margin: 20px 20px;
  padding: 40px 40px;
  height: 80vh;
  background-color: #ffffff;
  .settings {
    display: flex;
    justify-content: space-between;
    .left-setting {
      display: flex;
      .form-item {
        margin-left: 10px;
        margin-right: 10px;
      }
    }
    .right-setting {
      display: flex;
      .button {
        margin-right: 10px;
      }
    }
  }
  .customer-table {
    margin-top: 30px;
  }
}
.is-danger {
    color: red;
}
</style>
